<!-- 项目查询 -->
<template>
	<div>
		<devArticle>
			<Card :bordered="false">
				<p slot="title">项目查询</p>
				<p>
					<Row>
						<Col span="1">
							<p class="title-p">报告类型</p>
						</Col>
						<Col span="12">
							<span class="content-p">全部</span>
							<span class="content-p">报告表</span>
							<span class="content-p">报告书</span>
							<span class="content-p">现状评估报告</span>
							<span class="content-p">规划</span>
							<span class="content-p">验收</span>
						</Col>
					</Row>
					<Row>
						<Col span="1">
							<p class="title-p">选择时间</p>
						</Col>
						<Col span="12">
							<span class="content-p">不限</span>
							<span class="content-p">近一周</span>
							<span class="content-p">近一个月</span>
							<span class="content-p">近半年</span>
							<span class="content-p">近一年</span>
						</Col>
					</Row>
					
					<Row>
						<Col span="1">
							<p class="title-p">选择地区</p>
						</Col>
						<Col span="20">
							<span class="content-p">全国</span>
							<span class="content-p">安徽</span>
							<span class="content-p">北京</span>
							<span class="content-p">福建</span>
							<span class="content-p">甘肃</span>
							<span class="content-p">安徽</span>
							<span class="content-p">北京</span>
							<span class="content-p">福建</span>
							<span class="content-p">甘肃</span>
							<span class="content-p">安徽</span>
							<span class="content-p">北京</span>
							<span class="content-p">福建</span>
							<span class="content-p">甘肃</span>
							<span class="content-p">安徽</span>
							<span class="content-p">北京</span>
							<span class="content-p">福建</span>
							<span class="content-p">甘肃</span>
							<span class="content-p">安徽</span>
							<span class="content-p">北京</span>
							<span class="content-p">福建</span>
							<span class="content-p">甘肃</span>
							
						</Col>
					</Row>
					<Row style="padding:10px 0">
						<Col span="1">
							<p class="title-p">&nbsp;</p>
						</Col>
						<Col span="23">
							<Row>
								<Col span="2">
									 <Select v-model="model1" style="width:100%">
										<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
									</Select>
								</Col>
								<Col span="2" offset="1">
									<Select v-model="model1" style="width:100%">
										<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
									</Select>
								</Col>
								<Col span="18">
									 <Select v-model="model1" style="width:200px;float:right">
										<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
									</Select>
								</Col>
							</Row>
						</Col>
					</Row>
					<Row>
						<Col>
							 <Table border :columns="columns5" :data="data5"></Table>
							 <div style="margin: 10px;overflow: hidden">
								<div style="float: right;">
									<Page :total="100" :current="1" ></Page>
								</div>
							</div>
						</Col>
					</Row>
				</p>
			</Card>
			<Card :bordered="false">
				<p slot="title">已完成项目</p>
				<p>
					<Row>
						<Col span="1">
							<p class="title-p">报告类型</p>
						</Col>
						<Col span="12">
							<span class="content-p">全部</span>
							<span class="content-p">报告表</span>
							<span class="content-p">报告书</span>
							<span class="content-p">现状评估报告</span>
							<span class="content-p">规划</span>
							<span class="content-p">验收</span>
						</Col>
					</Row>
					<Row>
						<Col span="1">
							<p class="title-p">选择时间</p>
						</Col>
						<Col span="12">
							<span class="content-p">不限</span>
							<span class="content-p">近一周</span>
							<span class="content-p">近一个月</span>
							<span class="content-p">近半年</span>
							<span class="content-p">近一年</span>
						</Col>
					</Row>
					
					<Row>
						<Col span="1">
							<p class="title-p">选择地区</p>
						</Col>
						<Col span="20">
							<span class="content-p">全国</span>
							<span class="content-p">安徽</span>
							<span class="content-p">北京</span>
							<span class="content-p">福建</span>
							<span class="content-p">甘肃</span>
							<span class="content-p">安徽</span>
							<span class="content-p">北京</span>
							<span class="content-p">福建</span>
							<span class="content-p">甘肃</span>
							<span class="content-p">安徽</span>
							<span class="content-p">北京</span>
							<span class="content-p">福建</span>
							<span class="content-p">甘肃</span>
							<span class="content-p">安徽</span>
							<span class="content-p">北京</span>
							<span class="content-p">福建</span>
							<span class="content-p">甘肃</span>
							<span class="content-p">安徽</span>
							<span class="content-p">北京</span>
							<span class="content-p">福建</span>
							<span class="content-p">甘肃</span>
							
						</Col>
					</Row>
					<Row style="padding:10px 0">
						<Col span="1">
							<p class="title-p">&nbsp;</p>
						</Col>
						<Col span="23">
							<Row>
								<Col span="2">
									 <Select v-model="model1" style="width:100%">
										<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
									</Select>
								</Col>
								<Col span="2" offset="1">
									<Select v-model="model1" style="width:100%">
										<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
									</Select>
								</Col>
								<Col span="18">
									 <Select v-model="model1" style="width:200px;float:right">
										<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
									</Select>
								</Col>
							</Row>
						</Col>
					</Row>
					<Row>
						<Col>
							 <Table border :columns="columns5" :data="data5"></Table>
							 <div style="margin: 10px;overflow: hidden">
								<div style="float: right;">
									<Page :total="100" :current="1" ></Page>
								</div>
							</div>
						</Col>
					</Row>
				</p>
			</Card>
		</devArticle>
	</div>
</template>
<script type="text/javascript">
	export default {
  data() {
    return {
      cityList: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        },
        {
          value: "Sydney",
          label: "Sydney"
        },
        {
          value: "Ottawa",
          label: "Ottawa"
        },
        {
          value: "Paris",
          label: "Paris"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ],
      model1: "",
      columns5: [
        {
          align: "center",
          title: "项目编号",
          key: "date",
          sortable: true
        },
        {
          align: "center",
          title: "项目名称",
          key: "name"
        },
        {
          align: "center",
          title: "建设单位",
          key: "unit",
          sortable: true
        },
        {
          align: "center",
          title: "类型",
          key: "class",
          sortable: true
        },
        {
          align: "center",
          title: "修改日期",
          key: "alertDay",
          sortable: true
        },
        {
          align: "center",
          title: "状态",
          key: "state",
          sortable: true
        },
        {
          align: "center",
          title: "操作",
          key: "operation",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    color: "#ffffff",
                    background: "#2996ff",
                    border: "none",
                    padding: "0px 5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    color: "#ffffff",
                    background: "#2996ff",
                    border: "none",
                    padding: "0px 5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "修改"
              )
            ]);
          }
        }
      ],
      data5: [
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        },
        {
          date: "0000000",
          unit: "某某某某项目",
          address: "某某某某",
          class: "报告书",
          alertDay: "2018-08-24",
          state: "资料收集"
        }
      ]
    };
  }
};
</script>
<style>
.title-p {
  font-size: 14px;
  color: #464c5b;
  font-weight: bold;
}
.content-p {
  font-size: 12px;
  color: #a1a1a1;
}	
</style>